<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>聊天表情-emoticons</title>
		<link rel="shortcut icon" href="/public/image/favicon.png">
		<link rel="stylesheet" type="text/css" href="/public/style/cssreset-min.css">
		<link rel="stylesheet" type="text/css" href="/public/style/common.css">
		<style type="text/css">
			.emoticons{
				width: 525px;
				margin-bottom:20px;
			}
			.emoticons .publisher{
				padding-bottom: 10px;
				margin-bottom: 10px;
				border-bottom: 1px dotted #dbdbdb;
			}
			.emoticons .publisher textarea{
				width: 500px;
				height: 140px;
				padding: 5px 10px;
				border: 1px solid #dbdbdb;
				resize: none;
			}
			.emoticons .publisher .trigger{
				font-size: 24px;
				font-weight: bold;
				color: #666;
			}
			.emoticons .publisher .trigger-active{
				color: #eb7350;
			}
			.emoticons .result{
				padding: 10px 15px;
				border: 1px dotted #dbdbdb;
				margin-top: 10px;
				height: 150px;
				line-height: 24px;
			}
			.emoticons .result img{
				vertical-align: middle;
			}

			.widget-layer{
				position: relative;
				width: 410px;
				margin-top: 8px;
				background: #fff;
				border: 1px solid #dbdbdb;
				border-radius: 2px;
			}
			.widget-layer:before{
				position: absolute;
				top: -16px;
				left: 2px;
				display: block;
				content: '';
				width: 0;
				height: 0;
				border: 8px solid transparent;
				border-bottom-color: #dbdbdb;
			}
			.widget-layer:after{
				position: absolute;
				top: -15px;
				left: 2px;
				display: block;
				content: '';
				width: 0;
				height: 0;
				border: 8px solid transparent;
				border-bottom-color: #f0f0f0;
			}
			.widget-layer .widget-tool{
				height: 28px;
				background: #f0f0f0;
			}
			.widget-layer .widget-close{
				float: right;
				width: 28px;
				height: 28px;
				line-height: 28px;
				text-align: center;
				font-family: Arial;
			}
			.widget-layer ul{
				width: 372px;
				margin: 0 auto;
				padding: 15px 5px 20px;
				overflow: hidden;
			}
			.widget-layer li{
				position: relative;
				z-index: 8;
				float: left;
				width: 22px;
				height: 22px;
				padding: 4px;
				margin-left: -1px;
				margin-top: -1px;
				border: 1px solid #e8e8e8;
				cursor: pointer;
			}
			.widget-layer li:hover{
				z-index: 9;
				border-color: #eb7350;
			}
		</style>
		<script type="text/javascript" src="/public/script/jquery.min.js"></script>
		<script type="text/javascript" src="/code/jquery.emoticons.js"></script>
	</head>
	<body>
		<div class="header">
            <a href="https://github.com/mumuy/widget" target="_blank">项目地址</a>
            <a href="/">返回首页</a>
        </div>
		<div class="main">
			<div class="emoticons">
				<div class="publisher">
					<p><textarea name="content"></textarea></p>
					<p><a class="trigger" href="javascript:;">☺</a></p>
				</div>
				<div style="text-align:right;"><button id="format">解析</button></div>
				<div id="result" class="result"></div>
			</div>
			<script>
				$.emoticons({
					'activeCls':'trigger-active'
				},function(api){
					var $content = $('textarea[name="content"]');
					var $result = $('#result');
					$('#format').click(function(){
						$result.html(api.format($content.val()));
					});
				});
			</script>
			<div class="example">
                <div class="call">
                    <h1>调用方法：</h1>
                    <p>$.emoticons(options,callback);</p>
                </div>
                <h2>options参数</h2>
                <table>
                    <thead>
                        <tr>
                            <th width="150">参数</th>
                            <th width="120">默认值</th>
                            <th>说明</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>prefix</td>
                            <td>'widget'</td>
                            <td>弹出层结构中节点class的前缀</td>
                        </tr>
                        <tr>
                            <td>publisherCls</td>
                            <td>'publisher'</td>
                            <td>发布框外层的class（动态绑定）</td>
                        </tr>
                        <tr>
                            <td>triggerCls</td>
                            <td>'trigger'</td>
                            <td>表情触发点的class（动态绑定）</td>
                        </tr>
						<tr>
                            <td>activeCls</td>
                            <td>'active'</td>
                            <td>表情触发点激活时的class</td>
                        </tr>
                        <tr>
                            <td>path</td>
                            <td>'public/image/'</td>
                            <td>图片路径</td>
                        </tr>
                        <tr>
                            <td>list</td>
                            <td>[默认表情]</td>
                            <td>表情配置的对象数组，title表示转义的文本，url表示图片名称</td>
                        </tr>
                        <tr>
                            <td>left</td>
                            <td>0</td>
                            <td>表情选择框弹出位置与默认位置的水平偏移量</td>
                        </tr>
                        <tr>
                            <td>top</td>
                            <td>0</td>
                            <td>表情选择框弹出位置与默认位置的垂直偏移量</td>
                        </tr>
                        <tr>
                            <td>onShow()</td>
                            <td>[无]</td>
                            <td>表情选择框显示时执行</td>
                        </tr>
                        <tr>
                            <td>onHide()</td>
                            <td>[无]</td>
                            <td>表情选择框隐藏时执行</td>
                        </tr>
                        <tr>
                            <td>onSelect()</td>
                            <td>[无]</td>
                            <td>选中表情后执行</td>
                        </tr>
                    </tbody>
                </table>
                <h2>callback(api)参数</h2>
                <table>
                    <thead>
                        <tr>
                            <th width="200">方法</th>
                            <th>说明</th>
                        </tr>
                    </thead>
                    <tbody>
                    	<tr>
                            <td>getTextarea()</td>
                            <td>获取当前激活状态下的输入框</td>
                        </tr>
                        <tr>
                            <td>format(str)</td>
                            <td>格式化表情输出</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div style="display: none;">
            <script src="http://s11.cnzz.com/z_stat.php?id=1260218562&web_id=1260218562"></script>
        </div>
	</body>
</html>
